<template>
  <div :id="chartid" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { reactive, ref, watch, onMounted } from 'vue';
import * as echarts from "echarts";

// 接收组件传来的参数
const props = defineProps({
  chartid: {
    type: String
  },
  // 展示图例
  showLegend: {
    type: Boolean,
    default: true
  },
  // 单位
  unit: {
    type: String,
    default: '(单位：)'
  },
  xData: {
    type: Array,
    default: [], //默认值
  },
  data: {
    type: Array,
    default: []
  }
});

//声明周期函数，自动执行初始化
onMounted(() => {
  setTimeout(() => {
    init(props.chartid, props.xData, props.data);

  }, 200);
});
function getImageUrl (name) {
  return new URL(`../assets/images/${name}`, import.meta.url).href;
}
function createZeroArray (length) {
  return Array.from({ length: length }, () => 0);
}


//初始化函数
function init (id, xData, data) {

  let chartDom = document.getElementById(id)
  let Chart = echarts.getInstanceByDom(chartDom)
  if (Chart == null) {
    Chart = echarts.init(chartDom);
  } else {
    Chart.clear();
  }
  let ydata = [{
    // name: '背景',
    type: 'bar',
    tooltip: {
      show: false,
    },
    barWidth: 20,
    itemStyle: {
      color: 'rgba(255,255,255,0)',
      borderRadius: 0
    },
    backgroundStyle: {
      color: 'rgba(255,255,255,.15)',
    },
    showBackground: true,
    data: createZeroArray(xData.length),
  }];
  for (let i = 0; i < data.length; i++) {

    ydata.push({
      name: data[i].name,
      type: 'line',
      symbol: 'none',
      data: data[i].data
    },)
  }
  // 绘制图表
  let options = {
    color:['#3ef2fc','#ffe85a','#0081f8','#fe8b4c'],
    grid: {
      top: 45,
      bottom: '4%',
      left: '3%',
      right: '3%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      /* renderMode: "html",
      className: "mtooltip",
      formatter: function (data) {
        let html = ``
        for (let i = 0; i < data.length; i++) {
          if (data[i].value) {
            html += ` <div class="info"><div class="ll">${data[i].marker}${data[i].seriesName}</div><em class="num">${data[i].value}</em></div>`
          } else {
            html += ` <div class="info"><div class="ll">${data[i].marker}${data[i].seriesName}</div><em class="num">0</em></div>`
          }

        }
        let on = `<div class="tit">${data[0].axisValue}月</div>${html}`
        return on
      } */
    },
    legend: {
      // data: ['温度', '湿度', 'CO2', '氮气'],
      show: props.showLegend,
      right: '13',
      top: '17',
      icon: 'circle',
      itemWidth: 6,
      itemHeight: 6,
      textStyle: {
        fontSize: 12,
        color: '#fff'
      }
    },
    xAxis: {
      type: 'category',
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: 'rgba(255,255,255,.6)'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        margin: 10,
        fontSize: 14,
        color: "#fff"
      },
      data: xData,
    },
    yAxis: [
      {
        name: props.unit,
        type: 'value',
        nameTextStyle: {
          fontSize: 14,
          color: 'rgba(212,249,255,.8)',
        },
        interval: 20,
        max: 100,
        min: 0,
        axisLabel: {
          fontSize: 12,
          color: "#d4f9ff",

        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.3)",
            type: "dashed"
          }
        },
      },
    ],
    series: ydata
  };
  // 渲染图表
  Chart.setOption(options);
  window.addEventListener('resize', function () {
    Chart.resize();
  }, false);
}
</script>